(function($) {
   $.widget('ui.imageItem', {
         options:
             {
                //подгоняем контейнер под картинку
                resizeToImage: false,

                //подгоняем картинку под контейнер
                resizeToElement: true,

                //позволяем обрезаь картинку
                crop: false,

                //удалять объекты внутри контейнера
                erase: true,

                //позиция картинки относительно контейнера
                position: {
                    top: 'middle',
                    left: 'center'
                },
                loader: "<table style='width: 100%; height:100%;'><tr><td style='text-align:center; vertical-align: middle;'>Загрузка...</td></tr></table>",
                src: false,
                originalSize: {
                    width: 0,
                    height: 0
                },
                size: {
                     width: 0,
                     height: 0
                },
                imageData: false
             },
         _create: function() {
             //получаем адрес картинки из атрибута rel
             if (!this.options.src){
                this.options.src = this.element.attr('src') || this.element.attr('rel');
             }
             if (!this.options.src) return;
             if (this.options.erase) {
                 this.element.html('');
             }
             //рисуем лоадер
             if (this.options.loader) {
                this.options.loader = $(this.options.loader).appendTo(this.element);
             }
             var this_ = this;
             //создаём объект картинки
             this.options.imageData = new Image();

             this.options.imageData.onerror = function(){
                 this_._onError();
             }
             //onLoad объекта
             this.options.imageData.onload = function(){
                 this_.options.originalSize = {
                    width: this_.options.imageData.width,
                    height: this_.options.imageData.height
                 };
                 this_._resize();
                 this_._showImage();
             }
             this.options.imageData.src = this.options.src;
         },
         _resize: function() {
             //резайзем к картинке
             if (this.options.resizeToImage) {
                 $(this.options.imageData).css(
                 {
                     width: this.options.imageData.width,
                     height: this.options.imageData.height
                 });
                 this.element.css(
                 {
                     width: this.options.imageData.width,
                     height: this.options.imageData.height
                 });
             } else {
                 //позиционируем содержимое контейнера
                 this.element.css({
                    overflow: "hidden"
                 });
                 //размеры контейнера
                 if (!this.options.size.width || !this.options.size.height) {
                     this.options.size = {
                         width: this.element.width(),
                         height: this.element.height()
                     }
                 }
                 var width = this.options.imageData.width;
                 var height = this.options.imageData.height;
                 //ресайзим к элементу
                 if (this.options.resizeToElement && (width > this.options.size.width || height > this.options.size.height)) {
                     //растягиваем под элемент по минимальной стороне
                     if (width > height) {
                         var k = height / this.options.size.height;
                     } else if (width <= height) {
                         var k = width / this.options.size.width;
                     }
                     width = Math.round(width / k);
                     height = Math.round(height / k);
                     if (!this.options.crop){
                         k = 1;
                         if (height > this.options.size.height) {
                             k = height / this.options.size.height;
                         } else if (width > this.options.size.width) {
                             k = width / this.options.size.width;
                         }
                        width = Math.round(width / k);
                        height = Math.round(height / k);
                     }
                 }
                 var margin = {
                     top: 0,
                     left: 0
                 }
                 switch (this.options.position.top) {
                     case "bottom": margin.top = this.options.size.height - height;
                         break;
                     case "middle": margin.top = (this.options.size.height - height) / 2;
                         break;
                 }
                 switch (this.options.position.left) {
                     case "right": margin.left = this.options.size.width - width;
                         break;
                     case "center": margin.left = (this.options.size.width - width) / 2;
                         break;
                 }
                 $(this.options.imageData).css(
                 {
                     width: width,
                     height: height,
                     marginTop: margin.top,
                     marginLeft: margin.left,
                     display: 'none'
                 });
             }
         },
         _showImage: function() {
             if (this.options.loader) this.options.loader.remove();
             this.element.append($(this.options.imageData).fadeIn(500));
             this.element.trigger('image_loaded',this.options.imageData);
         },
         _onError: function() {
             if (this.options.loader) this.options.loader.remove();
             this.element.trigger('image_error',this.options.imageData);
         }
    })
})(jQuery);